<template>
    <div class="app-container">
        <el-row type="flex" justify="space-between">
            <el-col :span="7" class="form_place_info--place">
                <el-row><el-col class="form_place_info--place_title"><span>考场信息</span></el-col></el-row>
                <el-row>
                    <el-col><!-- 考场表单 -->
                        <el-form ref="form" :model="place" label-width="55px" label-position="top">
                            <el-form-item label="考站" prop="placeId">
                                <el-select v-model="place.placeId" placeholder="请选择考站" clearable style="width: 100%">
                                    <el-option v-for="item in placeList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="考官" prop="teacherIds">
                                <el-select v-model="place.teacherIds" placeholder="请选择考官" multiple style="width: 100%">
                                    <el-option v-for="item in teacherList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="技能" prop="skillId">
                                <el-select v-model="place.skillId" placeholder="请选择技能" clearable v-loading="skillLoading" style="width: 100%">
                                    <el-option v-for="item in skillList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="评分表" prop="sheetIds">
                                <el-select v-model="place.sheetIds" placeholder="请选择评分表" multiple v-loading="sheet_loading" style="width: 100%">
                                    <el-option v-for="item in sheetList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="16" class="form_place_info--place">
                <el-row>
                    <el-col class="form_place_info--place_title">
                        <span>学生信息</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <GO_SCORE_EXAM_STUDENT :student-list="studentList"
                                               :student-id-list="place.studentIdList" :student-loading="studentLoading"
                                               @setStudentIdList="setStudentIdList"/>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {listSheet} from "@/api/score/sheet";
import GO_SCORE_EXAM_STUDENT from "../go_score_exam_student"
import {isNotNull} from "@/utils/zzDouUtils/objUtil";
import {isEmptyArr} from "@/utils/zzDouUtils/arrayUtil";
export default {
    name: "Go_score_exam_place",
    components: {GO_SCORE_EXAM_STUDENT},
    props:{
        skillLoading:{
            type: Boolean,
            default: false,
        },
        studentList:{
            type: Array,
            default: ()=>[],
        },
        studentLoading:{
            type: Boolean,
            default: false,
        },
        teacherList: {
            type: Array,
            default: ()=>[],
        },
        placeList: {
            type: Array,
            default: ()=>[],
        },
        skillList: {
            type: Array,
            default: ()=>[],
        },
        place: {
            type: Object,
            default: ()=>{
                return {
                    placeId:"",
                    teacherIds: "",
                    skillId: "",
                    sheetIds: "",
                    studentIdList: [],
                }
            }
        }
    },
    watch: {
        'skillList': {//科室修改后，查询该科室下的学员、技能
            handler(newVal, oldVal) {
                if (isEmptyArr(newVal)){
                    this.$set(this.place,'skillId',null);
                    this.$set(this.place,'sheetIds',null);
                }
            },
            // 开启深度监听
            deep: true
        },
        'place.skillId': {//科室修改后，查询该科室下的学员、技能
            handler(newVal, oldVal) {
                if (newVal !== oldVal){
                    this.$set(this.place,'sheetIds',null);
                }
                this.getSkillModelList(newVal);
            },
            // 开启深度监听
            deep: true
        }
    },
    data() {
        return {
            sheetList: [],
            sheet_loading: false,
        };
    },
    created() {
        if (this.place.skillId){
            this.getSkillModelList(this.place.skillId);
        }
    },
    methods: {
        /** 选择学员列表赋值 */
        setStudentIdList(value){
            this.place.studentIdList = value;
        },
        /** 学员列表赋值 */
        setStudentList(value){
            this.studentList = value;
        },
        /** 查询技能下评分表列表 */
        getSkillModelList(skillId){
            if (isNotNull(skillId)) {
                this.sheet_loading = true;
                listSheet({skillId:skillId}).then(response=>{
                    this.$set(this,'sheetList', response.rows);
                    this.sheet_loading = false;
                })
            }else {
                this.$set(this.place,'sheetIds',null);
                this.$set(this,'sheetList', []);
            }
        },
    }
};
</script>
<style scoped>
/deep/.vue-treeselect__contro{
    border: 1px solid #DCDFE6;
}
.form_place_info--place{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 7px;
    border-radius: 10px;
}
.form_place_info--place .form_place_info--place_title{
    text-align: center;
    color: #909399;
    margin-bottom: 10px;
}
</style>
